/* Add a black background color to the top navigation */
.topnav {
  background-color: #111;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a, .topnav label {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 4px 16px;
  text-decoration: none;
  font-size: 14px;
  font-family: Consolas;
}

/* Change the color of links on hover */
.topnav a:hover, .topnav label:hover {
  background-color: #aaa;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active, label.active {
  background-color: #4CAF50;
  color: white;
}
.centered {
  position: fixed; top: 10%; left: 25%; z-index: 1000;
  width: 50%; height: 80%;
  background: rgb(19, 19, 19); color: white;
  overflow: auto;
}

/* TweakPane theme */
:root {
  --tp-font-family: Arial, sans-serif;
  --tp-base-background-color: #2e2e2e;
  --tp-button-background-color: hsl(0, 0%, 25%);
  --tp-button-background-color-active: hsl(0, 0%, 40%);
  --tp-button-background-color-focus: hsl(0, 0%, 35%);
  --tp-button-background-color-hover: hsl(0, 0%, 30%);
  --tp-button-foreground-color: #eeeeee;
  --tp-label-foreground-color: #aeb5b8;
}
.gui-panel {
  position: absolute;
  right: 0;
  max-height: 100%;
  overflow-y: auto;
}
.gui-panel::-webkit-scrollbar {
  width: 10px;
  background: var(--tp-base-background-color);
}
.gui-panel::-webkit-scrollbar-thumb {
  background: #777;
}
.tp-rotv {
  text-shadow: 1px 1px #000;
}
.tp-rotv button {
  text-shadow: inherit;
}
